.layout-container {
  @apply relative;
  @apply h-screen;
  @apply transition-all duration-500;
  :deep(.slidbar) {
    @apply absolute left-0;
    @apply w-[200px] h-full;
    @apply bg-[#62D1D2];
  }
  .main-view {
    @apply absolute right-0;
    @apply w-[calc(100vw-200px)] h-full;
     //@apply pl-5 pr-5;

    .navbar {
      @apply relative bg-[#62D1D2] py-2;
      .bread-nav {
        @apply text-white py-3;
        @apply flex items-center;

        :deep(.el-breadcrumb) {
          * {
            @apply ml-2;
            @apply text-black;
          }
        }
      }
      .userinfo-container {
        @apply absolute right-2 top-1/2  transform -translate-y-1/2;
      }
    }
    .main-section-container {
      @apply overflow-y-auto;
      @apply transition-all duration-500;
      @apply pl-5 pr-5 mt-3;
      .main-section {
        @apply relative;
        @apply h-full;
        @apply transition-all duration-500;
      }
    }
  }
  &.active {
    :deep(.slidbar) {
      @apply w-auto;
    }
    :deep(.main-view) {
      @apply ml-[64px] w-[calc(100vw-64px)];
      @apply transition-all duration-[1000];
    }
  }
}
:deep(.el-menu--collapse) li {
  a {
    @apply hidden;
  }
}
